<i18n>
{
  "en": {
    "page_title": ""
  },
  "zh": {
    "page_title": ""
  }
}
</i18n>

<template>

      <el-card>
        <div>
          <header class="text-danger product-line-header">产品线</header>
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">

          <el-form-item prop="productLine">
            <CheckboxTree :data="treeData" v-model="ruleForm.productLine" @change="TreeDatachange" :key="$route.query.productDirectoryId" />
          </el-form-item>

          <el-form-item class="text-center mt30">
              <el-button type="primary" @click="submitForm('ruleForm')">{{$t('common.ok')}}</el-button>
              <el-button type="danger" >{{$t('common.cancel')}}</el-button>
            </el-form-item>
          </el-form>

        </div>

      </el-card>

</template>

<script>
  import CheckboxTree from '@/components/checkboxTree'
  let mockProductLineData = [{
          label: '一级产品线1',
          id: '1',
          disabled: true,
          children: [{
            id: '1-1',
            label: '二级产品线A',
          },{
            id: '1-2',
            label: '二级产品线B',
          }]
        }, {
          id: '2',
          label: '一级产品线2',
          disabled: true,
          children: [{
            id: '2-1',
            label: '二级产品线C'
          }, {
            id: '2-2',
            label: '二级产品线D'
          }]
        }
        ];
  export default {
    data() {
      return {
        dataLoading: true,
        ruleForm: {
          productLine: ''
        },
        rules: {
          productLine: [
            { required: true, message: '请选择产品线', trigger: 'change' },
          ]
        },
        treeData:[]
      };
    },
    watch: {
      '$route': {
        handler: 'routeHandler',
        immediate: true
      }
    },
    components: {
      CheckboxTree
    },
    created() {

    },
    computed: {
    },
    methods: {
      TreeDatachange(data){
        //点选后保存选中结果
        this.submitTreeData=[...data]
      },
      routeHandler (route) {
        this.getProductLines()
      },
      // 获取产品线树
      getProductLines () {
        this.dataLoading = true
        this.$http({
          url: this.$http.adornUrl('/prm-os-srv-prod/queryProductInformationLineList'),
          method: 'post',
          data: this.$http.adornParams({
            id: this.$route.query.productDirectoryId
          })
        }).then(data => {
          if (data && data.code === 0) {
            let _data = data.data || {}
            let treeData = _data.productInformationList || [];

            this.treeData = treeData
          }

          this.dataLoading = false
        })
      },
      saveProductLines () {
        this.dataLoading = true

        let data={id:this.$route.query.productDirectoryId,productInformationList:this.submitTreeData}

        this.$http({
          url: this.$http.adornUrl('/prm-os-srv-prod/saveProductInformationLine'),
          method: 'post',
          data: this.$http.adornParams(data)
        }).then(data => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getProductLines()
              }
            })
          } else {
            this.$message.error(data.msg)
          }
          this.dataLoading = false
        })
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.saveProductLines()
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
  }
</script>

<style scoped>
  .aside-menu {
    padding: 15px;
    border-radius: 4px;
    position: relative;
    box-shadow: 5px 0px 15px 0px rgba(0, 0, 0, 0.1);
  }

  .pr0 {
    padding-right: 0;
  }

  .pt0 {
    padding-top: 0;
  }

  .mt30 {
    margin-top: 30px;
  }

  .tree-title {
    text-align: center;
    font-size: 16px;
    margin-bottom: 20px;
  }

  .product-line-header {
    font-size: 16px;
    margin-bottom: 20px;
  }
</style>
